<template>
	<view class="leo-tree">
        <view v-if="edit" class="tree-item add-top" style="background-color: #fff;margin-bottom: 20rpx;">
            <view class="head h-flex" @click="addItem({id:0})">
				<view style="line-height: 0;margin-right: 20rpx;">
				    <image src="../../static/add.png" class="edit-icon"   />
				</view>
                <view class="head-1">
                    <text class="txt u-font-32">创建一级分类</text>
                </view>
				
            </view>
			
        </view>
		<view v-if="edit" class="tree-item add-top" style="background-color: #fff;margin-bottom: 20rpx;">
		    <view class="head h-flex" @click="showLevel = !showLevel">
		        <view class="head-1">
		            <text class="txt u-font-32">{{showLevel?'显示排序级别':'隐藏排序级别'}}</text>
		        </view>
		    </view>
		</view>
		<treeNode 
            v-for="item in data"
            :items="data" 
            :item="item" 
            :key="item[defaultProps.id]" 
            :defaultProps="defaultProps" 
            :divider="divider" 
            :edit="edit"
			:isChoose="isChoose"
			:isShowLevel="showLevel"
            :unfold="unfold"
            @up-item="upItem" 
            @down-item="downItem" 
            @add-item="addItem" 
            @delete-item="deleteItem"
            @finger-action="fingerAction"
            @onlongPress="onlongPress"></treeNode>
        <neil-modal
            :show="inputshow"
            @close="close"
            :title="inputtitle"
            @cancel="cancel"
            @confirm="inputconfirm">
			<view class="">
				<view class="u-flex u-p-30" style="border: 1px solid #f2f2f2;">
					<view class="u-font-32" >
						名称：
					</view>
					<view class="" style="flex:1">
						<input v-model="inputcontent"  placeholder="请输入..." />
					</view>
					
				</view>
				<view class="u-flex u-p-30" style="border: 1px solid #f2f2f2;">
					<view class="u-font-32" >
						级别：
					</view>
					<view class="" style="flex:1">
						<input v-model="inputSort"  placeholder="请输入..." />
					</view>
					
				</view>
				<view class="u-flex u-p-30" v-if="inputtitle === '编辑节点'&&!isHaveChild" style="border: 1px solid #f2f2f2;">
					<view class="u-font-32">
						父级：
					</view>
					<view class="u-font-32 u-flex u-row-between" @click="parentShow=true">
						<view class="u-font-32 u-m-r-30">
							{{chooseParentName}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
        </neil-modal>
		<u-popup v-model="parentShow" mode="bottom">
			<view style="min-height: 600rpx;" class="u-p-35">
				<u-cell-group >
					<u-cell-item :class="{'choose-cell':chooseParentId === null}"  @click="chooseOneClassFn()" :title="'一级分类'"></u-cell-item>
					<u-cell-item :class="[{'choose-cell':item.id === chooseParentId},{'disable-cell':item.id=== isFirstClassId}]" @click="chooseParentIdFn(item.id,item.name)" :title="item.name" v-for="item in data" :key="item.id+'choose'"></u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>
<script>
    import neilModal from './tree-node/neil-modal.vue';
	import treeNode from './tree-node/tree-node.vue';
	export default {
		components:{
			treeNode,
            neilModal
		},
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			divider: {
				type: Boolean,
				default: false
			},
			unfold: {
				type: Boolean,
				default: false
			},
			edit: {
				type: Boolean,
				default: false
			},
			isChoose: {
				type: Boolean,
				default: false
			},
			defaultProps: {
				type: Object,
				default: () => {
					return {
                    	id: 'id',
                    	children: 'children',
                        name : 'name'
                    }
				}
			}
		},
		provide(){
			return {
			  defaultProps: this.defaultProps,
			  onClickItem: this.onClickItem,
			  upItem: this.upItem,
			  downItem: this.downItem,
			  addItem: this.addItem,
			  editItem: this.editItem,
			  deleteItem: this.deleteItem,
              fingerAction: this.fingerAction,
			  divider: this.divider,
			  unfold: this.unfold,
			  edit: this.edit,
              onlongPress: this.onlongPress,
			}
		},
		created(){
		},
		data() {
			return {
                pNodeData: {},
				addContent: '',
				addshow: false,
                inputtitle: '新增节点',
                inputshow: false,
                inputcontent: '',
				parentShow:false,
				chooseParentName:'',
				chooseParentId:'',
				isHaveChild:false,
				isFirstClassId:'',
				showLevel:true,
				inputSort:0,
			}
		},
	
		methods: {
			chooseParentIdFn(id,name){
				if(this.isFirstClassId === id){
					return false;
				}
				this.chooseParentId = id;
				this.chooseParentName = name;
			},
			chooseOneClassFn(){
				this.chooseParentId = null;
				this.chooseParentName = '无';
			},
            treeSort(tree, id, data) {
                // 树元素排序，并交换sort数据
                // tree 完整树列表
                // id: 待修改树列表排序的父级id
                // data {pnode: {}, itemA: {id:0, sort:0}, itemB: {id:0, sort:0}}
                const that = this;
                var switchData = 0;
                var operationflag = false;
                var forFn = function (arr, id, data) {
                    // {pnode: {}, itemA: {id:0, sort:0}, itemB: {id:0, sort:0}}
                    for (var i = 0; i < arr.length; i++) {
                        var item = arr[i];
                        if (item.pid != id) {
                            data.pnode = item;
                            forFn(item.children, id, data);
                        } else {
                            if (data.itemA.id === item.id) {
                                item.sort = data.itemA.sort;
                                switchData +=1;
                            }
                            if (data.itemB.id === item.id) {
                                item.sort = data.itemB.sort;
                                switchData +=1;
                            }
                        }
                        if (switchData ===2 && i === arr.length -1) {
                            if (data.pnode.children) {
                                data.pnode.children = data.pnode.children.sort((a, b) => a.sort - b.sort);
                                operationflag = true;
                                break;
                                return true;
                            }
                        }
                    }
                }
                forFn(tree, id, data);
                return operationflag;
            },
            onlongPress(e) {
				this.$emit('long-press', e);
            },
			onClickItem(e) {
				this.$emit('node-click', e);
			},
			upItem(e) {
				this.$emit('up-item', e);
			},
			downItem(e) {
				this.$emit('down-item', e);
			},
			addItem(e) {
                this.pNodeData = e;
                this.inputcontent = '';
                this.inputtitle = '新增分类';
                this.inputshow = true;
				// this.$emit('add-item', e);
			},
			editItem(e) {
                this.inputcontent = e[this.defaultProps.name];
				this.inputSort = e.sort;
                this.inputtitle = '编辑分类';
                this.pNodeData = e;
				this.isHaveChild= e.children.length!==0;
				if(e.parentId){
					let index = this.data.findIndex((item)=>{
						return item.id === e.parentId
					});
					this.chooseParentId = e.parentId;
					this.chooseParentName = this.data[index].name;
					this.isFirstClassId= '';
				}else{
					this.chooseParentId= '';
					this.chooseParentName= '无';
					this.isFirstClassId= e.id;
				}
                this.inputshow = true;
				
				// this.$emit('add-item', e);
			},
			deleteItem(e) {
				// console.log(e.id);
				this.$emit('delete-item', e);
			},
			fingerAction(e) {
				// console.log(e.item,e.action);
                // action:1上滑, 2下滑，3左滑，4右滑
				this.$emit('finger-action', e);
			},
            inputconfirm() {
                if(this.inputtitle === '新增分类') {
                    if(this.inputcontent  && this.pNodeData) {
                        console.log(this.inputcontent, this.pNodeData);
                        this.$emit('add-item', {pNodeData: this.pNodeData, addContent: this.inputcontent,addLevel:this.inputSort});
                    }
                }
                if(this.inputtitle === '编辑分类') {
                    this.$emit('edit-item', {pNodeData: this.pNodeData, editContent: this.inputcontent,parentId:this.chooseParentId,editLevel:this.inputSort});
                }
            },
            close() {
                this.inputshow = false;
            },
			cancel() {
                this.inputcontent = '';
                this.pNodeData = {};
                this.inputshow = false;
			}
		}
	}
</script>
<style scoped lang="scss">
	.choose-cell{
		background-color: #ffbb1a !important;
	}
	.disable-cell{
		background-color: #f8f8f8!important;
	}
    .head{
        display: flex;
        align-items: center;
        line-height: 60rpx;
    }
    .head-1{
        display: flex;
        flex-basis: auto;
        // margin-top: 10rpx;
    }
    .p-r-30{
        margin-right: 30rpx;
    }
    .p-t-20{
        margin-top: 20rpx;
    }
	.add-top{
		box-sizing: border-box;
		padding: 30rpx 32rpx;
		.h-flex{
		    display: flex;
		    flex-flow: row nowrap;
		    justify-content: center;
			align-items: center;
			height: 50rpx;
		}
	}
    .edit-icon{
            width: 40rpx;
            height: 40rpx;
            padding-right: 10rpx;
    }
</style>
